<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link rel="stylesheet" href="/css/userweb/bootstrap.min.css">
    <link rel="stylesheet" href="/css/loading.css">
    <link rel="stylesheet" href="/css/userweb/common.css">
    <link rel="stylesheet" href="/css/userweb/productDetail.css">
    <link rel="stylesheet" href="/css/userweb/myPagination.css">
    <style type="text/css">
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type="number"]{
            -moz-appearance: textfield;
        }
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body id="overhidden">
<div id="productVue" v-cloak>
    <!--点击收藏后显示页面-->
    <div class="model_box collection_confirm_box" >
        <div class="model_content">
            <div class="close_model_box" onclick="closeCollection()">
                <img src="/image/userweb/slicesImg/close-btn.png" alt="">
            </div>
            <div class="model_info">
                <div class="model_info_title">
                    <div class="model_tip_title">
                        <div class="title_zh">{{collect_message}}</div>
                        <div class="title_en">{{collect_message_english}}</div>
                    </div>
                </div>
                <div class="model_info_cont">
                    <div class="model_img">
                        <img :src="product.image" alt="">
                    </div>
                    <div class="model_name">
                        <div class="title_zh">{{product.name}}</div>
                        <!--<div class="title_en">Here is the name of the goods</div>-->
                    </div>
                </div>
            </div>
            <div class="model_bottom_bar" onclick="closeCollection()">
                <div class="model_btn collection_sure_btn">确定(determine)</div>
            </div>
        </div>
    </div>
    <div class="index_container">
        <div class="header">
            <div class="header_bar_container">
                <div class="header_bar">
                    <ul class="header_bar_left">
                        <li>
                            <span class="header_bar_phone">
                                <img src="/image/userweb/slicesImg/phone.png" alt="">
                            </span>
                            <p>{{tel}}</p>
                        </li>
                        <li>
                            <span class="header_bar_icon">
                                <img src="/image/userweb/slicesImg/emil.png" alt="">
                            </span>
                            <p>{{email}}</p>
                        </li>
                    </ul>
                    <ul class="header_bar_right" v-show="login">
                        <li>
                            <a :href="'/userweb/index/login.html'">
                                <div class="head_btn_title">登录/login</div>
                            </a>

                        </li>
                        <li>
                            <a :href="'/userweb/index/register.html'">
                                <div class="head_btn_title">注册/register</div>
                            </a>
                        </li>
                    </ul>
                    <ul class="header_bar_right" v-show="logout">
                        <li>
                            <a :href="'/userweb/index/index.html'" onclick="logOut()">
                                <div class="head_btn_title">退出登录/logout</div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!--导航-->
            <div class="header_nav_container">
                <div class="header_nav_box">
                    <div class="logo" onclick="homePage()">
                        <span>小货郎</span>
                    </div>
                    <div class="my_address">
                     <span class="my_address_icon">
                            <img src="/image/userweb/slicesImg/address.png" alt="">
                        </span>
                        <p>{{city}}</p>
                    </div>
                    <div class="store_logo">
                        <img :src="supplier.image" alt="">
                    </div>
                    <div class="logo_store_name">
                        <div class="title_zh">{{supplier.supplier_name}}</div>
                        <!--<div class="title_en">store name</div>-->
                    </div>
                    <div class="header_nav">
                        <div class="select_search">
                            <div class="select_search_cont" v-on:click="showSelect()">
                                <div class="select_search_img">
                                    <img src="/image/userweb/slicesImg/search-select.png" alt="">
                                </div>
                                <div class="select_show">本店/store</div>
                                <div class="select_search_tit" id="baseData">
                                    <p onclick="showSearch(1,this)"><a>本店/store</a></p>
                                    <p onclick="showSearch(2,this)"><a>小货郎</a></p>
                                </div>
                            </div>
                            <input type="text" v-model="searchs" placeholder="搜索/search">
                            <div class="shop_search_btn">
                                <a id="localSearch" :href="'/userweb/index/shopList.html?supplierId='+supplier.supplier_id+'&search='+searchs">搜索/search</a>
                                <a id="allSearch" :href="'/userweb/index/index.html?search='+searchs">搜索/search</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--轮播-->
        <div class="banner">
            <ul id="on"></ul>
            <div class="banner_list"></div>
        </div>
        <div class="content">
            <!--指向-->
            <div class="my_show_container">
                <div class="my_show_bar">
                    <div class="list_point">
                        <div class="point_title">
                            <a :href="'/userweb/index/index.html'">首页/Home</a>
                        </div>
                        <div class="dir_arrow_img">
                            <img src="/image/userweb/slicesImg/dir-arrow.png" alt="">
                        </div>
                        <div class="point_title">
                            <a :href="'/userweb/index/shopList.html?supplierId='+supplier_id">店铺/store</a>
                        </div>
                        <div class="dir_arrow_img">
                            <img src="/image/userweb/slicesImg/dir-arrow.png" alt="">
                        </div>
                        <div class="point_title">
                            <a class="active" :href="'/userweb/index/shopList.html?supplierId='+supplier_id+'&classify='+classify">
                                {{product.category}}/{{product.category_english}}</a>
                        </div>
                    </div>
                </div>
                <div class="shop_tag">
                    <ul id="myTab">
                        <li class="nav-tabs active">
                            <a href="#basicInformation" data-toggle="tab">
                                <div class="title_zh">基本信息</div>
                                <div class="title_en">basic information</div>
                            </a>
                        </li>
                        <li class="nav-tabs">
                            <a :href="'/userweb/index/shopList.html?supplierId='+supplier_id+'&type=2'">
                                <div class="title_zh">商家口碑</div>
                                <div class="title_en">business reputation</div>
                            </a>
                        </li>
                        <li class="nav-tabs">
                            <a :href="'/userweb/index/shopList.html?supplierId='+supplier_id+'&type=3'">
                                <div class="title_zh">收藏店铺</div>
                                <div class="title_en">favorite store</div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="my_show_box" id="detailInfo">
                    <div class="product_detail_l">
                        <div class="product_img">
                            <div class="product_show_img">
                                <div class="detail_show_img">
                                    <img :src="big_image" alt="" class="jqzoom">
                                </div>
                            </div>
                            <div class="product_img_bar">
                                <div class="img_btn" v-for="image in product_image.list_url" v-on:click="changeImage(image)"
                                     onclick="addBorder(this)">
                                    <img :src="image" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product_detail_r">
                        <div class="product_info">
                            <div class="product_name_box">
                                <div class="product_name">
                                    <div class="title_zh">{{product.name}}</div>
                                    <!--<div class="title_en">{{product.name_english}}</div>-->
                                </div>
                            </div>
                            <div class="product_price_box">
                                <div class="product_price">
                                    <div class="price_title">
                                        <div class="title_zh">价格</div>
                                        <div class="title_en">price</div>
                                    </div>
                                    <div class="price_num">
                                        <em>￡</em>
                                        <span>{{price}}/{{specification}}{{unit}}</span>
                                    </div>
                                </div>
                                <div class="product_vat">
                                    <div class="vat_title">
                                        <div class="title_zh">增值税</div>
                                        <div class="title_en">VAT</div>
                                    </div>
                                    <div class="vat_num">
                                        <em>￡</em>
                                        <span>{{tax}}/{{specification}}{{unit}}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="my_product_box">
                                <div class="product_activity">
                                    <div class="activity_title">
                                        <div class="title_zh">参加活动</div>
                                        <div class="title_en">participate in activities</div>
                                    </div>
                                    <div class="activity_name">{{discount.name}}</div>
                                </div>
                                <div class="product_class_box">
                                    <div class="product_class_title">
                                        <div class="title_zh">规格分类</div>
                                        <div class="title_en">classification</div>
                                    </div>
                                    <div class="classification_box">
                                        <div class="class_bar" v-for="(list, index) in specifications" v-bind:class={'active':index==0} onclick="activeClass(this)"
                                             v-on:click="change(list)">
                                            {{list.specification}} </div>
                                    </div>
                                </div>
                                <div class="product_quantity_box">
                                    <div class="product_quantity_title">
                                        <div class="title_zh">购买数量</div>
                                        <div class="title_en">purchase quantity</div>
                                    </div>
                                    <div class="quantity_box">
                                        <div class="quantity_icon" v-on:click="change2(1)">
                                            <img src="/image/userweb/slicesImg/num-reduce.png" alt="">
                                        </div>
                                        <div class="quantity_num"><input type="text" v-model="num" v-on:input="change2(3)" ></div>
                                        <div class="quantity_icon" v-on:click="change2(2)">
                                            <img src="/image/userweb/slicesImg/num-add.png" alt="">
                                        </div>
                                    </div>
                                    <div class="product_inventory">
                                        <div class="title_zh">库存<span>{{product.stock}}</span>{{unit}}</div>
                                        <div class="title_en">inventory</div>
                                    </div>
                                </div>
                            </div>
                            <div class="product_btn_box">
                                <div class="buy_btn_box">
                                    <div class="buy_btn" v-on:click="buyCar()">
                                        <a href="#">
                                            <div class="title_zh">加入购货车</div>
                                            <div class="title_en">enter into shopping cart</div>
                                        </a>
                                    </div>
                                    <div class="buy_btn active" v-on:click="orderNow()">
                                        <a href="#">
                                            <div class="title_zh">立即订购</div>
                                            <div class="title_en">place order</div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="product_collection">
                                <div class="product_collection_btn">

                                    <div v-on:click="collect(1,product.id)" v-if="product.collect == 0">
                                        <div class="collection_icon">
                                            <img src="/image/userweb/slicesImg/collection-air.png" alt="">
                                        </div>
                                        <div class="collection_title">
                                            <span>收藏/favorite list</span>
                                        </div>
                                    </div>

                                    <div v-on:click="collect(2,product.id)" v-if="product.collect == 1">
                                        <div class="collection_icon">
                                            <img src="/image/userweb/slicesImg/collection-fill.png" alt="">
                                        </div>
                                        <div class="collection_title active" >
                                            <span>已收藏/added to favorite Product</span>
                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="product_detail_container">
                <div class="product_detail_box">
                    <div class="detail_bar">
                        <ul>
                            <li class="nav-tabs active">
                                <a href="#detailContent" data-toggle="tab">
                                    <div class="title_zh">商品详情</div>
                                    <div class="title_en">product details</div>
                                </a>
                            </li>
                            <li class="nav-tabs">
                                <a href="#evaluationContent" data-toggle="tab" v-on:click="change1(1)">
                                    <div class="title_zh">累计评价</div>
                                    <div class="title_en">cumulative reviews</div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="product_detail_content tab-content">
                        <div class="detail_content tab-pane active" id="detailContent" v-loading="loading">
                            <div class="detail_info_box">
                                <div class="parameter_info">
                                    <div class="parameter_name">
                                        <div class="title_zh">商品名称</div>
                                        <div class="title_en">product name</div>
                                    </div>
                                    <div class="parameter_value">
                                        <div class="title_zh">{{product.name}}</div>
                                        <!--<div class="title_en">{{product.name_english}}</div>-->
                                    </div>
                                </div>
                                <div class="parameter_info">
                                    <div class="parameter_name">
                                        <div class="title_zh">商品参数</div>
                                        <div class="title_en">product parameters</div>
                                    </div>
                                    <div class="parameter_value">
                                        <div class="title_zh">这里是商品参数</div>
                                        <!--<div class="title_en">Product parameters</div>-->
                                    </div>
                                </div>
                                <div class="parameter_info">
                                    <div class="parameter_name">
                                        <div class="title_zh">产地</div>
                                        <div class="title_en">country of origin</div>
                                    </div>
                                    <div class="parameter_value">
                                        <div class="title_zh">{{product.origin}}</div>
                                        <!--<div class="title_en">{{product.origin_english}}</div>-->
                                    </div>
                                </div>
                                <div class="parameter_info">
                                    <div class="parameter_name">
                                        <div class="title_zh">品牌</div>
                                        <div class="title_en">brand</div>
                                    </div>
                                    <div class="parameter_value">
                                        <!--<div class="title_zh">{{product.brand}}</div>-->
                                        <div class="title_en">{{product.brand_english}}</div>
                                    </div>
                                </div>
                            </div>
                            <!--商品详情图片-->
                            <div class="detail_info_img" v-for="image in product_image.info_url">
                                <img :src="image" alt="">
                            </div>
                        </div>
                        <div class="evaluation_content tab-pane" id="evaluationContent" v-loading="loading">
                            <div class="business_info_box">
                                <div class="business_rating">
                                    <div class="rating_title">
                                        <div class="title_zh">总体评分</div>
                                        <div class="title_en">overall rating</div>
                                    </div>
                                    <div class="score_img" v-html="star"></div>
                                </div>
                                <div class="business_bar_list">
                                    <div class="radio_bar">
                                        <input type="radio" name="rating-type" checked="checked" v-on:click="change1(1)">
                                        <label>
                                            <span></span>
                                        </label>
                                        <div class="radio_title">
                                            <div class="title_zh">全部</div>
                                            <div class="title_en">all</div>
                                        </div>
                                    </div>
                                    <div class="radio_bar">
                                        <input type="radio" name="rating-type" v-on:click="change1(2)">
                                        <label>
                                            <span></span>
                                        </label>
                                        <div class="radio_title">
                                            <div class="title_zh">低分</div>
                                            <div class="title_en">low score</div>
                                        </div>
                                    </div>
                                    <div class="radio_bar">
                                        <input type="radio" name="rating-type" v-on:click="change1(3)">
                                        <label>
                                            <span></span>
                                        </label>
                                        <div class="radio_title">
                                            <div class="title_zh">最新</div>
                                            <div class="title_en">latest</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="rating_content">
                                    <div class="user_rating_info" v-for="list in score">
                                        <div class="user_rating_bar">
                                            <div class="user_rating_cont">{{list.comment}}</div>
                                            <div class="user_name">{{list.user_name}}</div>
                                        </div>
                                        <div class="user_rating_time">{{list.time}}</div>
                                    </div>
                                    <div id="noData"></div>
                                </div>
                                <div class="pagination_box" v-html="paginate"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="slogan">
            <div class="slogan_title">
                <p>让我们的生活有更好的选择</p>
            </div>
            <div class="sub_slogan_title">
                <p>Let our lives have a better choice.</p>
            </div>
        </div>
    </div>
</div>
{include file="html/Common/indexFooter"}
</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/vue-resource.js"></script>
<script src="/js/loading.js"></script>
<script src="/js/userweb/jquery.min.js"></script>
<script src="/js/userweb/jquery.imagezoom.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/userweb/common.js"></script>
<script src="/js/layer.js"></script>
<script src="/js/userweb/indexHome/productDetail.js"></script>
<script>
    $(function() {
        bannerInit();
        $('#localSearch').show();
        $('#allSearch').hide();

    });
    function showSearch(index,_this) {
        $(_this).children().addClass('active');
        $(_this).siblings().children().removeClass('active');
        var title = $(_this).children().text();
        $('.select_show').text(title) ;
        if (index == 1){
            $('#localSearch').show();
            $('#allSearch').hide();
        }
        if (index == 2){
            $('#localSearch').hide();
            $('#allSearch').show();
        }
    }
    //移入收藏夹
    function openCollection() {
        $('.collection_confirm_box').fadeIn(300);
        $('#overhidden').css('overflow','hidden');
    }
    function closeCollection() {
        $('.collection_confirm_box').fadeOut(300);
        $('#overhidden').css('overflow','inherit');
    }
    $(".product_collection_btn").click(function () {
        openCollection();
    });
    function activeClass(_this) {
        $(_this).addClass('active');
        $(_this).siblings().removeClass('active');
    }
    function addBorder($this) {
        $($this).css("border","1px solid #FF7010");
        $($this).siblings().css("border","1px solid #DEDEDE");
    }
    function logOut() {
        localStorage.removeItem('user_id');
        localStorage.removeItem('user_name');
        localStorage.removeItem('user_image');
        localStorage.removeItem('web_token');
        localStorage.removeItem('city');
    }
    function homePage() {
        location.href = "/userweb/index/index.html";
    }
</script>
</html>